<template>
    <div class="bookinfo_base">
       <div class="bookinfo_base_con clearfix">
         <div class="left">
           <img src="../../../static/img/bookinfo/1338988-1506349405000_1.jpg" alt="">
         </div>
         <div class="right">
           <h3 class="bookinfo_base_info">破天录</h3>
           <p class="bookinfo_base_author">
             <a href="">唐川</a>
             <span>玄幻奇幻</span>
           </p>
           <p class="add_share">
             <share></share>
           </p>
           <p class="bookinfo_base_state">
             <i>10万字</i>
             <i>连载中</i>
             <i>1小时前更新</i>
           </p>
           <p class="bookinfo_base_read">
             <span>4291023人读过</span>
            </p>
         </div>
       </div>
    </div>
</template>

<script>
  import share from '@/components/xiaozujian/btn/share.vue'
  export default {
    data () {
      return {
        msg: '13213'
      }
    },
    components: { share }
  }
</script>


<style>
  .bookinfo_base{
    position: relative;
  }
.bookinfo_base_con{
  padding:14px;
}
 .bookinfo_base_con .add_share{
   position: absolute;
   right: 20px;
   top:42px;
 }
.bookinfo_base_con img{
    width: 63px;
    margin-right: 14px;
    transform: perspective(800px) rotateX(8deg) rotateY(-25deg) rotateZ(0deg);
    box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 3px;
    border-right: 5px solid rgb(221, 221, 221);
    border-bottom: 3px solid rgb(204, 204, 204);
  }
.left{
  float: left;
}
.bookinfo_base_con h3{
  width: 110px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(15, 15, 15);
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  margin: 0px;
}
.bookinfo_base_author {
  margin:10px 0;
}
.bookinfo_base_author a{
  display: inline-block;
  margin-right: 10px;
  color: rgb(255, 102, 0);
}
.bookinfo_base_author  span{
    display: inline-block;
    border: 1px solid #ECECEC;
    color: #999;
    padding: 0 2px;
  }
  .bookinfo_base_state{
    font-size: 12px;
    margin: 10px 0;
  }
.bookinfo_base_read span{
  font-size: 12px;
}
</style>
